<template>
    <div class="page-wrap">
        <div class="page-header-wrap">
            <a-page-header @back="handleBack">
                <template #subTitle>
                    <span style="color: #000">【{{ detailData.versionNumber }}】【{{ detailData.versionName }}】</span>
                </template>
                <template #tags v-if="$route.query.status === '3'">
                    <!-- <a-tag color="blue" v-if="detailData.onlineTimeOffset <= 0"> 正常 </a-tag>
                    <a-tag color="red" v-else> 延期 </a-tag> -->
                    <a-tag color="red" v-if="detailData.onlineStatus === '2'">延期</a-tag>
                    <a-tag color="blue" v-if="detailData.onlineStatus === '1'">正常</a-tag>
                </template>
                <a-form layout="inline" labelAlign="left" v-if="detailData.id">
                    <a-row>
                        <a-col :span="8">
                            <a-form-item label="迭代周期" :span="24">
                                <span
                                    >{{
                                        detailData.versionRanddPlanStartTime
                                            ? $moment(detailData.versionRanddPlanStartTime).format('YYYY-MM-DD')
                                            : '暂无'
                                    }}~{{ detailData.versionExpectTime ? $moment(detailData.versionExpectTime).format('YYYY-MM-DD') : '暂无' }}</span
                                >
                            </a-form-item>
                        </a-col>
                        <a-col :span="3">
                            <a-form-item label="状态" :span="24">
                                <span><a-tag color="green">已上线</a-tag></span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="5">
                            <a-form-item label="实际上线日期" :span="24">
                                <span>{{
                                    detailData.versionOnlineRealTime ? $moment(detailData.versionOnlineRealTime).format('YYYY-MM-DD') : ''
                                }}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item :label="detailData.onlineTimeOffset >= 0 ? '流程延期天数' : '流程提前天数'" :span="24">
                                <span>{{
                                    detailData.onlineTimeOffset >= 0 ? detailData.onlineTimeOffset : ` ${Math.abs(detailData.onlineTimeOffset)}`
                                }}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-form-item label="负责人" :span="24">
                                <span>{{ detailData.responsibleUser }}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-page-header>
            <!-- <img src="@/assets/images/badge-task.png" style="position: absolute; top: 8px; right: -10px" /> -->
            <img src="@/assets/images/badge-track.png" style="width: 130px; height: 100%; position: absolute; top: 0px; right: 0" />
            <div
                style="
                    width: 130px;
                    height: 100%;
                    position: absolute;
                    top: 0px;
                    right: 0;
                    display: flex;
                    align-items: center;
                    padding-left: 40px;
                    color: #fff;
                "
            >
                <div>版本能效报告</div>
            </div>
        </div>

        <div style="background: #fff; width: 100%">
            <a-row>
                <a-col :span="10">
                    <h-section title="需求时间轴" collapse v-if="detailData.id">
                        <time-line :data="dataObj" :detail="detailData" v-if="dataObj.a" />
                    </h-section>
                </a-col>

                <a-col :span="14">
                    <h-section title="计划偏差详情" collapse v-if="detailData.id">
                        <div style="width: 100%">
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['a']"
                                :dataSource="dataObj['a']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['a'][0].onlineTimeOffset"
                                        >{{ dataObj['a'][0].onlineTimeOffset >= 0 ? '延期天数' : '提前天数' }}
                                    </span>
                                    <span v-else>提前/延期天数 </span>
                                </template>
                                <template #onlineTimeOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-row>
                                <a-col :span="11">
                                    <a-table
                                        size="small"
                                        bordered
                                        :columns="columnObj['b']"
                                        :dataSource="dataObj['b']"
                                        :pagination="false"
                                        class="margin-t-16"
                                    >
                                        <template #customTitle>
                                            <span v-if="dataObj['b'][0].randdStartOffset"
                                                >{{ dataObj['b'][0].randdStartOffset >= 0 ? '研发开始延期天数' : '研发开始提前天数' }}
                                            </span>
                                            <span v-else>提前/延期天数 </span>
                                        </template>
                                        <template #randdStartOffset="{ text }">
                                            {{ text ? Math.abs(text) : 0 }}
                                        </template>
                                    </a-table>
                                </a-col>
                                <a-col :span="2" />
                                <a-col :span="11">
                                    <a-table
                                        size="small"
                                        bordered
                                        :columns="columnObj['e']"
                                        :dataSource="dataObj['e']"
                                        :pagination="false"
                                        class="margin-t-16"
                                    >
                                        <template #customTitle>
                                            <span v-if="dataObj['e'][0].testStartOffset"
                                                >{{ dataObj['e'][0].testStartOffset >= 0 ? '测试开始延期天数' : '测试开始提前天数' }}
                                            </span>
                                            <span v-else>提前/延期天数 </span>
                                        </template>
                                        <template #testStartOffset="{ text }">
                                            {{ text ? Math.abs(text) : 0 }}
                                        </template>
                                    </a-table>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="11">
                                    <a-table
                                        size="small"
                                        bordered
                                        :columns="columnObj['c']"
                                        :dataSource="dataObj['c']"
                                        :pagination="false"
                                        class="margin-t-16"
                                    >
                                        <template #customTitle>
                                            <span v-if="dataObj['c'][0].randdEndOffset"
                                                >{{ dataObj['c'][0].randdEndOffset >= 0 ? '研发结束延期天数' : '研发结束提前天数' }}
                                            </span>
                                            <span v-else>提前/延期天数 </span>
                                        </template>
                                        <template #randdEndOffset="{ text }">
                                            {{ text ? Math.abs(text) : 0 }}
                                        </template>
                                    </a-table>
                                </a-col>
                                <a-col :span="2" />
                                <a-col :span="11">
                                    <a-table
                                        size="small"
                                        bordered
                                        :columns="columnObj['f']"
                                        :dataSource="dataObj['f']"
                                        :pagination="false"
                                        class="margin-t-16"
                                    >
                                        <template #customTitle>
                                            <span v-if="dataObj['f'][0].testEndOffset"
                                                >{{ dataObj['f'][0].testEndOffset >= 0 ? '测试结束延期天数' : '测试结束提前天数' }}
                                            </span>
                                            <span v-else>提前/延期天数 </span>
                                        </template>
                                        <template #testEndOffset="{ text }">
                                            {{ text ? Math.abs(text) : 0 }}
                                        </template>
                                    </a-table>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="11">
                                    <a-table
                                        size="small"
                                        bordered
                                        :columns="columnObj['d']"
                                        :dataSource="dataObj['d']"
                                        :pagination="false"
                                        class="margin-t-16"
                                    >
                                        <template #customTitle>
                                            <span v-if="dataObj['d'][0].randdConsumingOffset"
                                                >{{ dataObj['d'][0].randdConsumingOffset >= 0 ? '研发耗时延期天数' : '研发耗时提前天数' }}
                                            </span>
                                            <span v-else>提前/延期天数 </span>
                                        </template>
                                        <template #randdConsumingOffset="{ text }">
                                            {{ text ? Math.abs(text) : 0 }}
                                        </template>
                                    </a-table>
                                </a-col>
                                <a-col :span="2" />
                                <a-col :span="11">
                                    <a-table
                                        size="small"
                                        bordered
                                        :columns="columnObj['g']"
                                        :dataSource="dataObj['g']"
                                        :pagination="false"
                                        class="margin-t-16"
                                    >
                                        <template #customTitle>
                                            <span v-if="dataObj['g'][0].testConsumingOffset"
                                                >{{ dataObj['g'][0].testConsumingOffset >= 0 ? '测试耗时延期天数' : '测试耗时提前天数' }}
                                            </span>
                                            <span v-else>提前/延期天数 </span>
                                        </template>
                                        <template #testConsumingOffset="{ text }">
                                            {{ text ? Math.abs(text) : 0 }}
                                        </template>
                                    </a-table>
                                </a-col>
                            </a-row>
                        </div>
                    </h-section>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
import moment from 'moment';
import { HStatusTag } from '@/components';
import TimeLine from './components/timeline.vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { columnObj } from './config/data';
import api from '@/api';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HStatusTag,
        TimeLine
    },
    setup() {
        const { route, router, handleBack } = useRouterApi({
            backQuery: {
                path: '/energyManage/requireTrack'
            }
        });
        const state = reactive<any>({
            detailData: {},
            dataObj: {}
        });
        const getDetailData = async () => {
            const query = {
                id: route.query.id
            };
            const { success, moule } = await api.requireTrackModel.findVersionById(query);
            if (success) {
                const obj = {};
                const copyData = {};
                Object.keys(moule).forEach((key) => {
                    const val = moule[key];
                    if (key.indexOf('Time') >= 0 && key.indexOf('Offset') < 0) {
                        copyData[key] = val ? moment(val).format('YYYY-MM-DD') : val;
                    } else {
                        copyData[key] = val;
                    }
                });
                state.detailData = { ...moule };
                Object.keys(columnObj).forEach((key, index) => {
                    const value = columnObj[key];
                    obj[key] = obj[key] || [];
                    obj[key][0] = obj[key][0] || { key: index };
                    value.forEach((item) => {
                        obj[key][0][item.dataIndex] = copyData[item.dataIndex];
                    });
                });
                state.dataObj = obj;
            }
        };
        const init = () => {
            getDetailData();
        };
        init();
        return {
            columnObj,
            ...toRefs(state),
            handleBack
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    position: relative;
    height: 100%;
    .page-header-wrap {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 9;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        margin-bottom: 24px;
        &::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 100%;
            background: #045497;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .extra-wrap {
            position: absolute;
            right: 40px;
            bottom: 22px;
            color: #000;
            cursor: pointer;
        }
    }
    ::v-deep(.ant-form-item-label) {
        min-width: 0;
    }
}
.section-wrap {
    padding: 0;
}
// // 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
</style>